<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">AI换脸</h2>
    <br><br>

    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <p style="font-size: 24px">想换的脸：</p>
                    <div>
                        <input type="file" ng2FileSelect [uploader]="fileSelector1" accept=".jpg, .jpeg, .png, .gif, image/*" [disabled]="sending" />
                    </div>
                    <br>
                    <div>
                        <img style="max-width: 100%" src="{{inputImgUrl1}}" alt="">
                    </div>
                </div>
                <div class="col-md-6">
                    <p style="font-size: 24px">被换的脸：</p>
                    <div>
                        <input type="file" ng2FileSelect [uploader]="fileSelector2" accept=".jpg, .jpeg, .png, .gif, image/*" [disabled]="sending" />
                    </div>
                    <br>
                    <div>
                        <img style="max-width: 100%" src="{{inputImgUrl2}}" alt="">
                    </div>
                </div>
            </div>
        </mat-card>
    </div>
    <br>
    <div class="row justify-content-center">
        <button mat-raised-button color="primary" (click)="swap_face()" [disabled]="sending || !inputImgUrl1 || !inputImgUrl2">
            换脸
        </button>
    </div>
    <br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%; margin-top: 20px">
            <div *ngIf="outputImgUrl && !sending">
                <img style="max-width: 100%" src="{{outputImgUrl}}" alt="">
            </div>
            <p *ngIf="(!inputImgUrl1 || !inputImgUrl2) && !sending">换脸结果</p>
            <p *ngIf="sending">正在努力计算...</p>
            <mat-spinner *ngIf="sending"></mat-spinner>
            <p *ngIf="error">出错啦...</p>
        </mat-card>
    </div>
</mat-card>
